<template>
  <div class="liveVideo" :style="{height:boxHeight+'px',width:boxWidth+'px'}">
    <div :class="{videoBox:isFull}">
<!--        <video autoplay ref="videoEle" id="videoElement" @click="showControl" :class="{bgb:isPlay}" :style="{width:width+'px',height:height+'px'}"></video>-->
        <video-player class="vjs-custom-skin"
                      id="videoElement"
                      ref="videoPlayer"
                      :playsinline="true"
                      :webkit-playsinline="true"
                      :x5-playsinline="true"
                      :options="playerOptions"
                      :class="{bgb:isPlay,videoCamera:!camera}"
                      :style="{width:width+'px',height:height+'px'}"
                      :poster="imgH+img"
                      @ready="playerReadied">
        </video-player>
    </div>
    <div class="videoCover" @click.stop="showControl" :style="{height:boxHeight+'px',width:boxWidth+'px'}"></div>
    <div class="control" v-show="flag" @click.stop="showControl" :style="{height:boxHeight+'px',width:boxWidth+'px'}">
      <div class="top">
        <div class="title">
          <i class="iconfont iconfanhui1x" @click="back"></i>
            {{title}}
        </div>
        <i class="iconfont iconfenxiang1x" @click="toshare"></i>
      </div>
      <div class="center" >
<!--        <i class="iconfont " :class="[liveFlag?'iconbofang1x':'iconzanting1x',{fs80:isFull}]" @click.stop="liveSwitch"></i>-->

      </div>
      <div class="foot">
        <img src="./msg.png" v-show="isFull" @click.stop="showCartList()">
<!--        <i class="iconfont" v-show="!isFull" :class="[isMuted?'iconyinliang_huaban':'iconjinyin']" style="font-size: 20px;margin-right: 5px;padding-left: 15px" @click.stop="tagVoice"></i>-->
<!--        <i class="iconfont" :class="[isFull?'iconhuanyuan1x':'iconquanping1x']" @click.stop="fullScreen"></i>-->
      </div>
    </div>
      <div class="watchLive" v-if="liveBtn" @click.stop="liveSwitch">观看直播</div>
    <div class="cart" v-show="showCart" v-if="goods">
        <div class="top">
            <div class="shop">
                <div class="img">
                    <img v-if="shop" :src="imgH+shop.avatar">
                    <img v-else src="./sjyx.png">
                </div>
                <div class="info">
                    <div class="name">{{shop?shop.name:'社集优选自营店'}}</div>
                    <div class="desc">{{shop?shop.slogan:''}}</div>
                </div>
            </div>
            <div class="join" @click="inShop()">进入店铺 <i class="iconfont iconarrow_right"></i></div>
        </div>
        <div class="goodsList">
            <liveCart :show-pel="false" :goods="goods"></liveCart>
        </div>
    </div>
  </div>
</template>

<script>
  import flvjs from 'flv.js'
  import liveCart from "./liveCart";
export default {
  name: 'liveVideoI',
  components:{liveCart},
  data(){
    return{
      flag:false,
      isPlay:false,
      flvPlayer:null,
      voice:true,
      liveFlag:false,
      poster:require('./poster.png'),
      closeControl:null,
      width:null,
      height:null,
      isFull:true,
      isMuted:true,
      boxWidth:null,
      boxHeight:null,
      showCart:false,
      imgH:process.env.VUE_APP_IMG_DOMAIN,
      playerOptions: {
            // height: '320',
            // width: '100%',
            notSupportedMessage: '此视频暂无法播放，请稍后再试',
            sources: [{
                withCredentials: false,
                type: "application/x-mpegURL",
                src: this.src
            }],
            // controlBar: {
            //   timeDivider: false,
            //   durationDisplay: false,
            //   remainingTimeDisplay: true,
            //   fullscreenToggle: false  //全屏按钮
            // },
            controls:false,
            flash: { hls: { withCredentials: false }},
            html5: { hls: { withCredentials: false }},
            autoplay: true, // 自动播放
            // controls: true, // 控制条
            fluid: true, // 按比例缩放适应容器
            muted:false,

            // preload: 'auto', // 预加载
            // muted: true, // 消除所有音频
            // loop: false, // 循环播放
            aspectRatio: "16:9",
            // poster: 'https://surmon-china.github.io/vue-quill-editor/static/images/surmon-9.jpg' //首屏图片
        },
      player:null,
        liveBtn:true
    }
  },
  methods:{
    playerReadied(player) {
      this.flvPlayer = player
      let hls = player.tech({ IWillNotUseThisInPlugins: true }).hls
      player.tech_.hls.xhr.beforeRequest = function(options) {
          // console.log(options)
          return options
      }
    },
    showControl(){
      if (this.showCart){
          this.showCart = false
          return
      }
      this.flag=!this.flag
      if (this.flag&&this.liveFlag){
        clearTimeout(this.closeControl)
         this.closeControl = setTimeout(()=>{
          this.flag = false
        },2000)
      }
    },
    tagVoice(){
      this.isMuted = !this.isMuted
      this.flvPlayer.muted = !this.flvPlayer.muted
    },
    fullScreen(){
        return
        this.isFull = !this.isFull
        this.$emit('fullScreen',this.isFull)
        if (this.isFull){
            this.width=document.body.clientHeight
            this.height=document.body.clientWidth
            this.boxWidth= document.body.clientWidth
            this.boxHeight = document.body.clientHeight
        }else {
            this.width=document.body.clientWidth
            this.height=211
            this.boxWidth= document.body.clientWidth
            this.boxHeight = 211
        }
    },
    liveSwitch(){
        this.liveBtn = false
        this.flvPlayer.play()

      // this.liveFlag = !this.liveFlag
      // if (this.liveFlag){
      //   this.flvPlayer.pause()
      // }else {
      //   this.flvPlayer.play()
      // }
    },
    showCartList(){
        this.showCart = true
    },
    inShop(){
        let uid = 0
        if (this.shop){
            uid=this.shop.id
        }
        this.$router.push({
            path:'/shop/list',
            query:{uid}
        })
    },
    back(){
        this.$router.push({
            path:'/home'
        })
    },
      toshare(){
          this.$emit('shareLive',666)
      }
  },
  props: {
    src:String,
    backSrc:String,
    title:{
        type: String,
        default:()=>{
            return '直播间'
        }
    },
    goods:{
        type:Array,
        default:()=>{}
    },
    shop:{
        type:Object,
        default:()=>{}
    },
    img:String,
    camera:{
        type:Number,
        default:0
    }

  },
  watch:{
    // src(){
    //   this.flvPlayer.pause()
    //   this.flvPlayer.unload()
    //   this.flvPlayer.detachMediaElement()
    //   this.flvPlayer.destroy()
    //   this.flvPlayer = null
    // }
  },
  mounted () {
    // let flvSrc = this.src
    // if (flvjs.isSupported()) {
    //   let videoElement = document.getElementById('videoElement')
    //   let flvPlayer = flvjs.createPlayer({
    //     type: 'flv',
    //     isLive:true,
    //     url: flvSrc,
    //   })
    //   flvPlayer.attachMediaElement(videoElement)
    //   flvPlayer.load()
    //   this.$nextTick(()=>{
    //     this.isPlay = true
    //     this.flvPlayer = flvPlayer
    //     this.flvPlayer.play()
    //   })
    // }
    this.width=document.body.clientHeight
    this.height=document.body.clientWidth
    this.boxWidth= document.body.clientWidth
    this.boxHeight = document.body.clientHeight
      // this.$nextTick(()=>{
      //     this.flvPlayer.play()
      // })
  },

}
</script>

<style scoped>
.liveVideo{
    width: 100%;
    height: 100%;
    background-color: #000000;
}
.videoBox{
    transform:rotate(90deg);
}
#videoElement{
  /*height: 375px;*/
  /*width: 667px;*/
  background-repeat: no-repeat;
  background-size: 100%;
  object-fit:fill
}
.videoCamera{
    transform:rotate(180deg);
}
.vjs-custom-skin /deep/video{
    object-fit:fill;
    height:100%;
    width: 100%;
}
.vjs-custom-skin /deep/.video-js{
    width: 100%;
    height: 100%;
}
.vjs-custom-skin /deep/.vjs-error-display{
    opacity: 0;
}
.videoCover{
    position: absolute;
    top: 0;
    left: 0;
    z-index: 555;
}
.bgb{
  background-image: none !important;
  background: #000 !important;
}
.control{
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
    z-index: 666;
  color: #FFFFFF;
  font-size: 15px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.top{
  padding: 15px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.center{
  text-align: center;
  font-size: 24px;
}
.fs80{
    font-size: 80px;
}

.foot{
  padding: 15px;
  padding-left: 0;
  display: flex;
  align-items: center;
}
.foot img{
    width: 50px;
    height: 45px;
}
.cart{
    z-index: 899;
    border-radius: 8px 8px 0 0;
    background-color: #fff;
    position: absolute;
    bottom: 0;
    width: calc(100% - 40px);
    padding:8px 20px;

}
.cart .top{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0;
}
.cart .top .shop{
    display: flex;
    align-items: center;
}
.cart .top .shop .img{
    height: 32px;
    width: 32px;
}
.top .shop .img img{
    width: 32px;
    height: 32px;
}
.shop .info{
    margin-left: 5px;
}
.top .shop .name{
    font-size: 12px;
    color: #303333;
    line-height: 17px;
}
.shop .info .desc{
    font-size: 10px;
    color: #909999;
    line-height: 14px;
}
.cart .join{
    font-size: 14px;
    line-height: 20px;
    color: #CCCCCC;
}
.liveCart /deep/.right{
    padding: 0  10px;
}
.liveCart /deep/.item{
    height: 88px;
}
.liveCart /deep/.mainImg img{
    width: 88px;
    height: 88px;
}
.liveCart /deep/.mainImg{
    width: 88px;
    height: 88px;
}
.liveCart /deep/.toCart{
    font-size: 25px;
}
.watchLive{
    z-index: 898;
    width: 100px;
    height: 29px;
    line-height: 29px;
    top: 310px;
    left: 137.5px;
    text-align: center;
    position: absolute;
    display: inline;
    border-radius: 20px;
    background-color: #ff7500;
    font-size: 20px;
    color: #fff
}

</style>
